<template>
  <div id="afterPsw">
    <Header :showheaderLeft="false" :showBack="true" :isTitle="true" :showTitle="true"></Header>
    <div class="rootMain">
      <div class="topImg">
        <div>
          <img src="@/assets/img/fuze/icon200.png" alt />
        </div>
        <span
          :class="['start',teamLevel==1?'oneLevel':(teamLevel==2?'twoLevel':(teamLevel==3?'threeLevel':''))]"
        >
          <b></b>
          <b></b>
          <b></b>
        </span>
      </div>
      <div class="con">
        <div class="inviteData">
          <div class="item">
            <p>{{honeyCount}} {{$t('m.bit')}}</p>
            <p class="text">{{$t('m.closeFriend')}}</p>
          </div>
          <div class="item">
            <p>{{sumCount}} {{$t('m.bit')}}</p>
            <p class="text">{{$t('m.cumulativeFriend')}}</p>
          </div>
        </div>
        <div class="inviteData">
          <div class="item">
            <p>{{teamRecharge}} CNN</p>
            <p class="text">{{$t('m.performance')}}</p>
          </div>
          <div class="item">
            <p>{{teamBuyProduct}} CNN</p>
            <p class="text">{{$t('m.performance1')}}</p>
          </div>
        </div>
        <div class="inviteData">
          <div class="item">
            <p>{{directDriveNum}} 台</p>
            <p class="text">{{$t('m.directDriveNum')}}</p>
          </div>
          <div class="item">
            <p>{{teamMinersNum}} 台</p>
            <p class="text">{{$t('m.teamMinersNum')}}</p>
          </div>
        </div>
        <!-- 邀请码 -->
        <div class="code">
          <h2>{{$t('m.invitationCode')}}</h2>
          <div>
            <p>
              <span>{{userObj.referrerCode}}</span>
            </p>
            <p :class="language == 'en_US'?'en_p':''">
              <a href="javascript:;" @click="goMyCode()">{{$t('m.invitationCode')}}</a>
              <a href="javascript:;" @click="copyShaneUrl()">{{$t('m.invitationLink')}}</a>
            </p>
            <input type="text" :value="copyUrl" id="copyInput" v-show="false" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      sumCount: 0,
      honeyCount: 0,
      teamRecharge: 0.0,
      teamBuyProduct: 0.0,
      teamLevel: 0,
      directDriveNum:0,//直推矿机数量
      teamMinersNum:0,//团队矿机数量
      userObj: {
        referrerCode: ""
      },
      language: "",
      copyUrl: "",
      grounp: 3 //判断是团队用户还是正常用户  1是正常用户 2是团队长 3是团队成员
    };
  },
  created() {
    this.changeTitle(this.$t("m.myInvitation"));
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    this.language = localStorage.getItem("language");
    Services.getUser({
      token: this.loginToken,
      lang: localStorage.getItem("language")
    }).then(res => {
      if (res.code == "0000") {
        this.userObj = res.user;
        this.sumCount = res.childrenCount;
        this.honeyCount = res.directChildrenCount;
        this.teamRecharge = res.teamRecharge.toFixed(2);
        this.teamBuyProduct = res.teamBuyProduct.toFixed(2);
        this.directDriveNum = res.directChildrenBuyProductCount;//直推
        this.teamMinersNum = res.teamBuyProductCount;//团队
        this.teamLevel = res.user.level;
        this.tempReferrerCode = res.user.referrerCode;
        localStorage.setItem("userObj", JSON.stringify(this.userObj));
        let _url = window.location.href.replace("invite", "reg");
        this.copyUrl = _url + "&code=" + this.userObj.referrerCode;
      } else {
        Toast(res.msg);
        localStorage.removeItem("token");
        localStorage.removeItem("userObj");
        localStorage.setItem("loginBack", true);
        this.$router.push(`/login`);
      }
    });
  },
  components: { Header },
  computed: {},
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    copy(id, attr) {
      let target = null;
      if (attr) {
        target = document.createElement("div");
        target.id = "tempTarget";
        target.style.opacity = "0";
        if (id) {
          let curNode = document.querySelector("#" + id);
          target.innerText = curNode[attr];
        } else {
          target.innerText = attr;
        }
        document.body.appendChild(target);
      } else {
        target = document.querySelector("#" + id);
      }

      try {
        let range = document.createRange();
        range.selectNode(target);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand("copy");
        window.getSelection().removeAllRanges();
        Toast(this.$t("m.successfulCopy"));
      } catch (e) {
        Toast(this.$t("m.replicationFailed"));
      }

      if (attr) {
        // remove temp target
        target.parentElement.removeChild(target);
      }
    },
    copyShaneUrl() {
      if (this.userObj.referrerCode == "") {
        Toast(this.$t("m.invitationFailed"));
        return;
      }
      this.copy("copyInput", "value");
    },
    goMyCode() {
      if (this.userObj.referrerCode == "") {
        Toast(this.$t("m.invitationFailed"));
        return;
      }
      this.$router.push(`/myCode?code=${this.userObj.referrerCode}`);
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#afterPsw {
  width: 100%;
  height: 100%;
  .rootMain {
    top: 0.88rem;
    height: calc(100% - 0.88rem);
    overflow-y: auto;
    .topImg {
      .start {
        display: flex;
        justify-content: center;
        align-items: center;
        b {
          margin: 0.2rem;
          display: block;
          width: 0.48rem;
          height: 0.45rem;
          background-image: url("~@/assets/img/new/start.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        &.oneLevel {
          b {
            &:nth-of-type(1) {
              background-image: url("~@/assets/img/new/start2.png");
            }
          }
        }
        &.twoLevel {
          b {
            &:nth-of-type(1) {
              background-image: url("~@/assets/img/new/start2.png");
            }
            &:nth-of-type(2) {
              background-image: url("~@/assets/img/new/start2.png");
            }
          }
        }
        &.threeLevel {
          b {
            background-image: url("~@/assets/img/new/start2.png");
          }
        }
      }
      > div {
        border-radius: 50%;
        overflow: hidden;
      }
    }
    .con {
      padding: 0.45rem 0.5rem;
      &.grounp3 {
        height: calc(100% - 4.64rem);
        .code {
          border-top: 0;
        }
      }
    }
    .awardBox {
      display: flex;
      justify-content: center;
    }
    .award {
      width: 60%;
      margin-bottom: 0.25rem;
      background: #30323e;
      box-shadow: 0 0 0.1rem rgba(62, 62, 62, 0.4);
      border-radius: 0.2rem;
      text-align: center;
      padding: 0.3rem;
      box-sizing: border-box;
      > div {
        display: flex;
        justify-content: center;
        margin-bottom: 0.2rem;
        h4 {
          font-size: 0.32rem;
        }
        p {
          margin: 0 0.2rem;
          color: #bcbdbf;
          font-size: 0.32rem;
        }
        b {
          color: #fceba8;
          font-size: 0.32rem;
          letter-spacing: 0.05rem;
        }
      }
      .btn {
        margin: 0 auto;
        background: #434551;
      }
    }
    .inviteData {
      display: flex;
      margin-bottom: 0.2rem;
      align-items: center;
      justify-content: space-between;
      &.grounp2 {
        justify-content: center;
      }
      .item {
        width: calc(50% - 0.1rem);
        height: 1.8rem;
        background: #fff;
        box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 0.1rem;
        p {
          font-size: 0.28rem;
          font-weight: bold;
          &.text {
            margin-top: 0.2rem;
            font-size: 0.22rem;
            font-weight: normal;
          }
        }
      }
    }
    .code {
      // border-top: 1px solid #31333f;
      padding: 0.5rem 0.2rem 0.5rem;
      min-height: 0.1rem;
      h2 {
        text-align: center;
        font-size: 0.32rem;
        font-weight: 600;
        border-radius: 0.1rem;
      }
      div {
        p {
          padding-top: 0.4rem;
          img {
            height: 2rem;
            width: 2rem;
          }
          a {
            margin: 0 auto;
            width: 2.6rem;
            margin-right: 0.4rem;
            height: 0.85rem;
            display: inline-block;
            line-height: 0.85rem;
            font-size: 0.28rem;
            letter-spacing: 0.05rem;
            text-align: center;
            border-radius: 0.1rem;
            color: #fff;
            background: linear-gradient(to right, #43434e, #727181);
          }
          a:last-child {
            margin-right: 0;
          }
          span {
            display: inline-block;
            min-width: 2.5rem;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            letter-spacing: 0.2rem;
            text-indent: 0.2rem;
            border-radius: 0.1rem;
            text-align: center;
            background: linear-gradient(to right, #f8f8f8, #d3d3d5);
            color: #fd6262;
            font-size: 0.3rem;
            font-weight: 600;
          }
          &.en_p {
            a {
              letter-spacing: 0rem;
            }
          }
        }
        p:nth-child(1) {
          display: flex;
          justify-content: center;
        }
        p:nth-child(2) {
          display: flex;
          justify-content: center;
        }
        p:nth-child(3) {
          text-align: center;
        }
      }
    }
  }
}
</style>